<template>
  <div class="chapter_det">
    <navigate>课程章节详情</navigate>
    <div class="det_cont">
      <!-- 切换 -->
      <div class="tab_bar dis_flex just_center">
        <div
          class="item-tab tab_01"
          :class="currentTab == 1 ? 'active_tab' : ''"
          @click="chooseTab(1)"
        >
          <span>章节内容学习</span>
        </div>
        <div
          class="item-tab tab_02"
          :class="currentTab == 2 ? 'active_tab' : ''"
          @click="chooseTab(2)"
        >
          <span>章节用户评论</span>
        </div>
      </div>
      <div>
        <contentLearn v-if="currentTab == 1" :info="info" />
        <userComment
          v-if="currentTab == 2"
          :list="userCommentList"
          @send="sendContent"
        />
      </div>
    </div>
  </div>
</template>

<script>
import userComment from "./components/userComment.vue";
import contentLearn from "./components/contentLearn.vue";
import {
  queryChapterDatails,
  queryCourseCommentList,
  sendCourseComment,
} from "@/api/funcation/psychologySchool";

export default {
  data() {
    return {
      currentTab: 1,
      info: {},
      userCommentList: [],
      value: "",
      chapterId: "",
      pageSize: 10,
      page: 1,
    };
  },
  created() {
    this.chapterId = this.$route.query.id;
    this.getChapterDatails();
    this.getCourseCommentList();
  },
  components: { userComment, contentLearn },
  methods: {
    //评论
    async getCourseCommentList() {
      let par = {
        pageSize: this.pageSize,
        page: this.page,
        id: this.chapterId,
      };
      let res = await queryCourseCommentList(par);
      if (res.code == 200) {
        this.userCommentList = res.data.data;
      }
    },
    //章节详情
    async getChapterDatails() {
      let res = await queryChapterDatails({
        id: this.chapterId,
      });
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    async sendContent(val) {
      let par = {
        course_id: this.info.course_id,
        chapter_id: this.chapterId,
        content: val,
      };
      let res = await sendCourseComment(par);
      if (res.code == 200) {
        this.$toast.success("回复成功");
        this.getCourseCommentList();
      }
    },
    chooseTab(v) {
      this.currentTab = v;
    },
    toDetailsPage() {
      this.$router.push("/historicalDetails");
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.chapter_det {
  background-color: #f4f6fa;
  color: #333333;
}

.det_cont {
  padding: 10px 10px 0 10px;
}

//切换
.tab_bar {
  margin-bottom: 10px;
}

.item-tab {
  width: 163.33px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: #fff;
  font-size: 14.67px;
  line-height: 33.33px;
  font-weight: bold;
}

.tab_01 {
  border-radius: 6.67px 0 0 6.67px;
}

.tab_02 {
  border-radius: 0px 6.67px 6.67px 0px;
}

.active_tab {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  color: #fff;
}
</style>
